<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spd" tagdir="/WEB-INF/tags/admin/"%>
<spd:layout>

<jsp:attribute name="head">
<!-- html的头部内容，如title、css等。 -->
<title>添加新闻</title>
<style type="text/css">
	
</style>
</jsp:attribute>

<jsp:attribute name="body">
<div class="row">
	<div class="col-md-12">
		<div class="box box-primary">
			<div class="box-body">
				<div class="row">
					<div class="col-md-10 col-md-offset-1">
						<form id="form">
							<table class="table table-bordered spd-table">
								<tbody>
									<tr>
										<td style="width: 100px;"><label class="spd-label">新闻标题</label></td>
										<td>
											<div class="spd-validate">
												<textarea class="form-control" rows="3" name="title" placeholder="必填"></textarea>
											</div>
										</td>
									</tr>
									<tr>
										<td><label class="spd-label">新闻分类</label></td>
										<td>
											<div class="spd-validate">
												<input class="form-control" type="text" name="newsCategoryName" placeholder="必填">
												<input type="hidden" name="newsCategoryId">
											</div>
										</td>
									</tr>
									<tr>
										<td><label class="spd-label">新闻来源</label></td>
										<td>
											<div class="spd-validate">
												<input class="form-control" type="text" name="author" placeholder="">
											</div>
										</td>
									</tr>
									<tr>
										<td><label class="spd-label">是否置顶</label></td>
										<td>
											<div class="spd-validate">
												<select class="form-control" name="isTop">
													<option value="0">不置顶</option>
													<option value="1">置顶</option>
												</select>
											</div>
										</td>
									</tr>
									<tr>
										<td><label class="spd-label">是否发布</label></td>
										<td>
											<div class="spd-validate">
												<select class="form-control" name="publishStatus">
													<option value="0">不发布</option>
													<option value="1">发布</option>
												</select>
											</div>
										</td>
									</tr>
									<tr>
										<td><label class="spd-label">新闻封面</label></td>
										<td>
											<div class="spd-validate">
												<div class="spd-upload-cover-image"></div>
											</div>
											<input type="hidden" name="coverImage" value="">
										</td>
									</tr>
									<tr>
										<td><label class="spd-label">新闻内容</label></td>
										<td>
											<div class="spd-validate">
												<textarea rows="20" name="content"></textarea>
											</div>
										</td>
									</tr>
									<tr>
										<td></td>
										<td>
											<button class="btn btn-primary" id="btnSave" style="width:120px;">保存</button>
											&nbsp;
											<button class="btn btn-default" id="btnClose" style="width:120px;">关闭</button>
										</td>
									</tr>
								</tbody>
							</table>
							<!-- /#table -->
						</form>
						<!-- /#form -->
					</div>
				</div>				
			</div>
			<!-- /.box-body -->
		</div>	
	</div>
</div>
<!-- /.row -->
</jsp:attribute>

<jsp:attribute name="dialog">

<div id="dialogNewsCategory">
	<ul id="newsCategoryTree" class="ztree" style="width:100%;height:100%;overflow:auto;"></ul>
</div>
<!-- /#dialogSysDept -->

</jsp:attribute>

<jsp:attribute name="script">
<script type="text/javascript">
	$(function(){
		(function(){
			var el = $('#form textarea[name="content"]');
			var editor = new wangEditor(el.get(0));
			editor.config.menuFixed = false;
			editor.config.uploadImgUrl = SpdUI.contextPath + '/admin/upload/wangEditorImage.do';
			editor.config.uploadImgFileName = 'uploadfile';
			editor.create();
			el.data('editor', editor);
		})();
		
		$('#btnClose').on('click', function(){
			SpdUI.closeTab('addNews');
			return false;
		});
		
		$('#form input[name="newsCategoryName"]').on('click', function(){
			SpdUI.openDialog('#dialogNewsCategory');
			return false;
		});
		
		SpdUI.dialog('#dialogNewsCategory', {
			title: '新闻分类',
			closeLabel: '清空选择',
			dialogData: {
				treeId: 'newsCategoryTree',
				$tree: $('#newsCategoryTree')
			},
			buttons: [{
				label: '确定选择',
				cssClass: 'btn-primary',
				action: function(dialog, dialogData, dialogBody) {
					var tree = $.fn.zTree.getZTreeObj(dialogData.treeId),
						nodes = tree.getSelectedNodes(),
						$form = $('#form'),
						node;
					
					if(nodes && nodes.length > 0){
						node = nodes[0];
						
						if(node.id !== 0){
							$form.find('input[name="newsCategoryName"]').val(node.name);
							$form.find('input[name="newsCategoryId"]').val(node.id);
						}							
					}
					
					dialog.close();
				}
			}],
			onclose: function(dialog, dialogData, dialogBody) {
				var $form = $('#form');
				
				$form.find('input[name="newsCategoryName"]').val('');
				$form.find('input[name="newsCategoryId"]').val('');
			},
			oncreate: function(dialog, dialogData, dialogBody) {
				dialogData.$tree.height($(window).height() - 300);
			},
			onhide: function(dialog, dialogData, dialogBody){
				$.fn.zTree.destroy(dialogData.treeId);
				$('#form').find('input[name="newsCategoryName"]').isValid();
			},
			onshow: function(dialog, dialogData, dialogBody) {
				SpdUI.getJSON({
					url: SpdUI.contextPath + '/admin/news/category/queryAll.do',
					success: function(data, json){								
						var tmp = [{
							id: 0,
							name: '新闻分类',
							open: true
						}];
						
						$.each(data, function(i, v){
							tmp.push({
								id: v.id,									
								parentId: v.parentId,
								code: v.code,
								name: v.name
							});
						});
						
						$.fn.zTree.init(dialogData.$tree, {
							data: {
								simpleData: {
									enable: true,
									pIdKey: 'parentId'
								}
							},
							view: {
								selectedMulti: false
							}
						}, tmp);
					},
					failure: function(json, message){
						SpdUI.alert('加载失败！');
					}
				});
			}
		});
		
		SpdUI.imageUploader($('.spd-upload-cover-image'), {
			//defaultImageUrl: SpdUI.contextPath + '/static/admin/images/avatar.jpg',
			defaultImageCount: 1,
			maxImageCount: 1,
			uploadMessage: '不超过500KB，支持jpg/png/gif/bmp格式。',
			imageTools: false,
			uploadLabel: '上传封面',
			server: SpdUI.contextPath + '/admin/upload/file.do',
			uploadSuccess: function(json, file, uploader, $el){
				$('#form input[name="coverImage"]').val(json.data.url);
			}
		});
		
		SpdUI.formValidator('#form', {
			title: {
				rule: 'required;length(~50)',
				msg: '请输入新闻标题，不超过50个字。'
			},
			newsCategoryName: {
				rule: 'required',
				msg: '请选择新闻分类。'
			}
		}, 'bottom');
		
		$('#btnSave').on('click', function(){
			var $form = $('#form');
			if(!$form.isValid()) {
				return false;
			}
			
			if(!$form.find('input[name="coverImage"]').val()){
				SpdUI.alert('请上传新闻封面图片！');
				return false;
			}
			
			SpdUI.ajaxSubmit($form, {
				url: SpdUI.contextPath + '/admin/news/add.do',
				success: function(data, json){
					SpdUI.alert('操作成功！');
					$form.resetForm();
					SpdUI.resetImageUploader($('#form .spd-upload-cover-image'));
					$('#form textarea[name="content"]').data('editor').$txt.html('<p><br></p>');
				}
			});
			
			return false;
		});
	});
</script>
</jsp:attribute>

</spd:layout>